<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import type { PropsInterface, ColumnType } from './interface'

defineOptions({
  name: 'Container',
})

const props = defineProps<PropsInterface>()

const isRenderColumn = (keyName: ColumnType) => {
  if (!props.columns) return false
  return props.columns.includes(keyName as ColumnType)
}

const emits = defineEmits<{
  (e: 'on:import'): void
  (e: 'on:export'): void
  (e: 'on:delete'): void
  (e: 'on:allDelete'): void
  (e: 'on:add'): void
  (e: 'on:search'): void
  (e: 'on:clear'): void
}>()
</script>

<template>
  <div class="container-component">
    <div class="header">
      <div class="header-content">
        <div class="header-content-title">{{ props.title }}</div>
        <div class="header-content-button-group">
          <el-input
            v-if="props.search"
            style="width: 200px; height: 32px"
            placeholder="搜索"
            class="search-input"
            clearable
            @input="emits('on:search')"
            @clear="emits('on:clear')"
            @keyup.enter.native="emits('on:search')"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button
            type="success"
            v-if="isRenderColumn('import')"
            @click="emits('on:import')"
          >
            导入
          </el-button>
          <el-button
            type="default"
            v-if="isRenderColumn('export')"
            @click="emits('on:export')"
          >
            导出
          </el-button>
          <el-button
            type="danger"
            v-if="isRenderColumn('delete')"
            @click="emits('on:delete')"
          >
            删除
          </el-button>
          <el-button
            type="danger"
            v-if="isRenderColumn('allDelete')"
            @click="emits('on:allDelete')"
          >
            批量删除
          </el-button>
          <el-button
            type="primary"
            v-if="isRenderColumn('add')"
            @click="emits('on:add')"
          >
            新增
          </el-button>
        </div>
      </div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container-component {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  padding: 0 10px;
  box-shadow: 0px 1px 0px 0px #01040966;
  // border: 1px solid #3d444d;
  border: 1px solid var(--lineColor);
  // background-color: #0d1117;
  background-color: var(--backColor);

  .header {
    width: inherit;
    height: 56px;
    border-bottom: 1px solid var(--lineColor);
    display: flex;
    align-items: center;
    margin-bottom: calc((56px - 32px) / 2);

    .header-content {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-content-title {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: 600;
      }

      .header-content-button-group {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
      }
    }
  }

  .content {
    width: inherit;
    height: calc(100% - (56px + 24px));
    overflow: hidden;
    position: relative;
  }
}
</style>
